<template>
	<view class="sale-commit page">
		<view class="address" @click="toAddress" v-if="type==0">
			<text class="iconfont icondizhi"></text>
		<view class="address-info" v-if="!address" >
				<view class="detail">
					点击选择地址
				</view>
			</view>
			<view class="address-info" v-else>
				<view class="user-info">
					<text class="name">{{address.name}}</text>
					<text class="phone">{{address.mobile}}</text>
				</view>
				<view class="detail">
				{{address.near}}{{address.detail}}{{address.house}}
				</view>
			</view>
			<text class="iconfont iconarrow_right"></text>
		</view>
		<view class="pay-info" v-if="type==0">
			<view class="time vb">
				<text class="name">送达时间</text>
				<text class="val">尽快送达</text>
			</view>
			<view class="pay vb">
				<text class="name">支付方式</text>
				<text class="val">在线支付</text>
			</view>
		</view>
		
		<view class="order-info">
			<view class="top">
				<image class="img" :src="imgH+shop.logo"></image>
				<text class="name">{{shop.name}}</text>
			</view>
			<view class="items">
				<mall-order-item :item="item" v-for="(item,index) in cartItems" :key="index" class="item"></mall-order-item>
			</view>
		</view>
		<view class="labels">
			<!-- <mall-order-commit-label class="label first" :remark="true" more="选择优惠券" title="商品金额" right="¥188.00"></mall-order-commit-label> -->
			<view class="other">
			<mall-order-commit-label class="label" :more="priceInfo.total" title="商品金额" ></mall-order-commit-label>
			<!-- <mall-order-commit-label class="label" :more="priceInfo.cut" title="优惠金额" ></mall-order-commit-label> -->
			<mall-order-commit-label class="label" v-if="priceInfo.point>0" :more="priceInfo.point" title="赠送积分" ></mall-order-commit-label>
			<mall-order-commit-label class="label" v-if="type==0" :more="sendFee" title="配送费" ></mall-order-commit-label>
			<mall-order-commit-label v-model="remark" :input="true" @click.native="showRemark" class="label" more="填写备注" title="备注" ></mall-order-commit-label>
			</view>
		</view>
		<mall-commit-bar :logFee="sendFee" @confirm="confirm"  :priceInfo="priceInfo" class="commit-bar"></mall-commit-bar>
		<min-action-sheet ref="as"></min-action-sheet>
	</view>
</template>

<script>
	import mallOrderItem from '@/components/mall-order-item/mall-order-item.vue'
	import mallOrderCommitLabel from '@/components/mall-order-commit-label/mall-order-commit-label.vue'
	import mallCommitBar from '@/components/mall-commit-bar/mall-commit-bar.vue'
	import {getOutCart,setOutCart,getInCart,setInCart} from '@/storage/index.js'
	import {clear} from '@/common/js/cart.js'
	import CONFIG from '@/config/index.js'
	import {addressInfo,getAddress} from '@/api/sale-address.js'
	import minActionSheet from '@/components/min-action-sheet/min-action-sheet.vue'
	import {commit} from '@/api/sale_order.js'
	import {showCorrect} from '@/modal/index.js'
	import {showError} from '@/toast/index.js'
	import {info} from '@/api/shop'
	export default {
		components:{
			mallOrderItem,mallOrderCommitLabel,mallCommitBar,minActionSheet
		},
		onShow() {
			this.seatNo = this.$Route.query.seatNo
			//跳转到地址后保存
			if(this.$Route.query.shopId){
				this.shopId= this.$Route.query.shopId
				this.type= this.$Route.query.type
			}
			info(this.shopId).then(res=>{
				this.shop = res.data
			})
			this.getCart()
			if(this.addressId){
				addressInfo(this.addressId).then(res => {
					this.address = res.data
				})
			}else{
				this.getAddress()
			}
			
		},
		methods:{
			getCart(){
				if(this.type==0){
					this.cart = getOutCart()
				}else{
					this.cart = getInCart()
				}
			},
			setCart(){
				if(this.type==0){
					 setOutCart(this.cart)
				}else{
					setInCart(this.cart)
				}
			},
			showRemark(){
					
			},
			getAddress(){
				getAddress().then(res => {
					res.data.forEach(ad => {
						if(ad.def){
							this.address = ad
						}
					})
				})
			},
			commit(){
				if(this.type==0&&!this.address){
					showError("请选择地址！")
				}
				commit(this.type,this.shopId,this.cartItems,this.address.id,this.payWay,this.remark,this.seatNo).then(res => {
					if(res.data.paid){//已经支付
						this.clearCart()
						showCorrect("支付成功").then(res => {
							this.$Router.replace("/pages/sale/order/index")
						})
					}else{ 
						this.wxPay(res)
					}
				})
			},
			wxPay(res){
				let ob = JSON.parse(res.data.wxPayParam)
				uni.requestPayment({
					success:()=>{
						this.clearCart()
						showCorrect("支付成功").then(res => {
							this.$Router.replace("/pages/sale/order/index")
						})
					},
					complete:()=>{
						this.clearCart()
					},
					fail: () => {
						showError("取消支付!")
						this.$Router.replace({
							path:"/pages/sale/order/detail",
							query:{id:res.data.orderId}
						})
					},
					...ob
				})
			},
			toAddress(){
			  this.$Router.push({path:"/pages/sale/address",shopId:this.shopId})	
			},
			clearCart(){
				this.cart = clear(this.cart)
				this.setCart()
			},
			confirm(){
				if(!this.address){
					showError("请先选择地址")
					return
				}
				this.$refs.as.handleShow({
					actions:this.payWays,
					success: (res) => {
						this.payWay = res.id
						this.commit()
					}
				})
			}
		},
		computed:{
			imgH(){
				return CONFIG.IMG_HEAD
			},
			sendFee(){
				return getApp().globalData.config.sendFee
			},
			cartItems(){
				return	Object.values(this.cart).filter(item => item.sel)
			},
			priceInfo(){
				let nowPrice = 0
				let oldPrice = 0 
				let point = 0
				let number = 0
				this.cartItems.forEach(item => {
					if(item.sel){
						nowPrice += item.nowPrice*item.number
						oldPrice += item.oldPrice*item.number
						point += item.point*item.number
						number+=item.number 
					}
				})
				let cut = (oldPrice - nowPrice).toFixed(2)
				let total = nowPrice.toFixed(2)
				return {cut:"-"+cut,total,point,number}
			}
		},
		data() {
			return {
				seatNo:null,
				type:null,
				shopId:null,
				shop:{},
				cart:{},
				payWay:0,
				payWays:[{name:"微信支付"},{"name":"余额支付"}],
				address:null,
				addressId:null,
				remark:null
			};
		}
	}
</script>

<style lang="stylus" scoped>
	.sale-commit
		padding 0 20upx 100upx
		background url(../../../static/dbg.png)  no-repeat
		background-size 100% 150upx
		background-color #EFEFEF
		overflow scroll
		.address
			 margin-bottom 20upx
			 border-radius 10upx
			 background-color #FFFFFF
			 height 200upx
			 display flex
			 padding 0 22upx 
			 justify-content space-between
			 align-items center
			 .icondizhi
				font-size 40upx
				color #F0C808
			.address-info
				width 551upx
				display flex
				flex-direction column
				justify-content center
				.user-info
					margin-bottom 25upx
					display flex
					align-items center
					.name
						font-size 32upx
						color #4E3D07
						margin-right 25upx
						line-height 32upx
					.phone
						color #A1A1A1
						font-size 28upx
				.detail
					text-overflow ellipsis
					line-clamp 2
					overflow hidden
					font-size 24upx
					color #4E3D07
			.iconarrow_right
				font-size 22upx
				color #6F6F6F
		.pay-info
			background-color white
			margin-bottom 20upx
			border-radius 20upx
			.time
				border-bottom 1px solid #EFEFEF
			.vb
				height 86upx
				display flex
				align-items center
				justify-content space-between
				padding 0 20upx
				.name
					color #000000
					font-size 24upx
				.val
					font-size 24upx
					color #335C67
		.order-info
			border-radius 10upx
			background-color white
			padding 20upx 20upx
			.top
				height 48upx
				display flex
				align-items center
				display flex
				align-items center
				margin-bottom 33upx
				.img
					height 48upx
					width 48upx
					margin-right 12upx
				.name
					color #4E3D07
					font-size 28upx
			.items
				display flex
				flex-direction column
				.item
					margin-bottom 19upx
		.labels
			margin-top 20upx
			display flex
			flex-direction column
			border-radius 10upx
			overflow hidden
			.label
				&.first
					border-bottom none
					border-radius 10upx
					overflow hidden
					margin 10upx 0
			.other
				border-radius 10upx
				overflow hidden
				display flex
				flex-direction column
				.label
					 border-bottom 1Px solid #DCDCDC
					 &:last-child
						border-bottom none
		.commit-bar
			z-index 2
			position fixed
			bottom 0
			left 0
			right 0
</style>
